<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-tree
      class="filter-tree"
      :data="data"
      :show-checkbox="canSelect"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree"
      @node-click="handleNodeClick"
      @check="getCheckedKeys"
      node-key="menuid"
    >
    </el-tree>
  </div>
</template>
<script>
export default {
  props: {
    canSelect: false,
    roleId: null,
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
    //父组件传入的角色id，渲染，子组件的所勾选的权限

    roleId: {
      immediate: true,
      handler: function (newValue) {
        this.$axios
          .get("/api/rbacRole/roles/" + newValue)
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.checked = res.data.data;
            }
            this.$refs.tree.setCheckedKeys(this.checked);
          })
          .catch();
      },
    },
  },
  created() {
    this.$axios("/api/rbacMenu/listMenus")
      .then((res) => {
        if (res.data.code == 200) {
          this.data = res.data.data;
        }
      })
      .catch();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.menuname.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      console.log(data);
    },
    getCheckedKeys() {
      this.$emit("callFather", this.$refs.tree.getCheckedKeys());
    },
  },

  data() {
    return {
      filterText: "",
      data: [],
      checked: [],
      defaultProps: {
        children: "menus",
        label: "menuname",
      },
    };
  },
};
</script>